<!--
* @author wn
* @date 2023/09/14 10:40:03
* @description: 微信授权登陆 模块
!-->
<template>
	<image
		src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/logo_icon.png"
	></image>
	<view class="login">
		<!-- 网页端表单登录 -->
		<!-- #ifdef H5 -->
		<input
			v-model="form.account"
			class="input"
			type="text"
			placeholder="请输入用户名/手机号码"
		/>
		<input
			v-model="form.password"
			class="input"
			type="text"
			password
			placeholder="请输入密码"
		/>
		<button class="button phone" @tap="onSubmit">登录</button>
		<!-- #endif -->

		<!-- 小程序端授权登录 -->
		<!-- #ifdef MP-WEIXIN -->
		<button
			class="button phone"
			open-type="getPhoneNumber"
			@getphonenumber="onGetPhoneNumber"
		>
			<text class="icon icon-phone"></text>
			手机号快捷登录
		</button>
		<!-- #endif -->

		<view class="extra">
			<view class="caption">
				<text class="move">其他登录方式</text>
			</view>
			<view class="options">
				<!-- 通用模拟登录 -->
				<button @tap="onPhoneTest">
					<text class="icon icon-phone">模拟快捷登录</text>
				</button>
			</view>
		</view>
		<view class="tips">
			登录/注册即视为你同意《服务条款》和《小兔鲜儿隐私协议》
		</view>
	</view>
</template>
<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { wxLoginApi, accountLoginApi, phoneTestLoginApi } from '@/api/login'
import { reactive } from 'vue'
import { useMemberStore } from '@/stores'

// #ifdef H5
// 传统表单登录，测试账号：13123456789 密码：123456
const form = reactive({
	account: '13123456789',
	password: '123456',
})

// 表单提交
const onSubmit = async () => {
	const res = await accountLoginApi({ ...form })
	loginSuccess(res)
}
// #endif

// #ifdef MP-WEIXIN
// 1 获取 code
let code: string
onLoad(async () => {
	const { code: codeResult } = await wx.login()
	code = codeResult
})
// 2 获取 LoginParams
const onGetPhoneNumber: UniHelper.ButtonOnGetphonenumber = async e => {
	const { encryptedData, iv } = e.detail
	if (!encryptedData || !iv) return
	const res = await wxLoginApi({ code, encryptedData, iv })
	loginSuccess(res)
}
// #endif

// 模拟手机号码快捷登录 -- 个人开发者 获取 token
const onPhoneTest = async () => {
	const res = await phoneTestLoginApi('13123456789')
	loginSuccess(res)
}

// 登陆成功 1 pinia 保存  2 跳转 个人中心
const { setMember } = useMemberStore()

const loginSuccess = (res: LoginResult) => {
	setMember(res)
	// 成功提示
	uni.showToast({ icon: 'success', title: '登录成功' })
	// 页面跳转
	// uni.switchTab({ url: '/pages/member/member' })
	uni.navigateBack()
}
</script>
<style lang="scss">
image {
	display: block;
	width: 220rpx;
	height: 220rpx;
	margin: 200rpx auto 128rpx;
}

.login {
	display: flex;
	flex-direction: column;
	height: 60vh;
	padding: 40rpx 20rpx 20rpx;

	.input {
		width: 100%;
		height: 80rpx;
		font-size: 28rpx;
		border-radius: 72rpx;
		border: 1px solid #ddd;
		padding-left: 30rpx;
		margin-bottom: 20rpx;
	}

	.button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80rpx;
		font-size: 28rpx;
		border-radius: 72rpx;
		color: #fff;
		.icon {
			font-size: 40rpx;
			margin-right: 6rpx;
		}
	}

	.phone {
		background-color: $primary-color;
	}

	.wechat {
		background-color: #06c05f;
	}

	.extra {
		flex: 1;
		padding: 70rpx 70rpx 0;
		.caption {
			width: 440rpx;
			height: 50rpx;
			margin: 0 auto;
			border-top: 1rpx solid #ddd;
			font-size: 26rpx;
			color: #999;
			text-align: center;
			.move {
				display: inline-block;
				padding: 0 8rpx;
				background-color: #f7f7f7;
				transform: translateY(-14rpx);
			}
		}

		.options {
			margin-top: 70rpx;
		}

		.icon {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #444;

			&::before {
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 40rpx;
				border: 1rpx solid #444;
				border-radius: 50%;
				margin-bottom: 6rpx;
			}
		}
		.icon-weixin::before {
			border-color: #06c05f;
			color: #06c05f;
		}
	}
}

.tips {
	position: absolute;
	bottom: 120rpx;
	left: 20rpx;
	right: 20rpx;
	font-size: 22rpx;
	color: #999;
	text-align: center;
}
</style>
